import React, { useState } from 'react'

const Component = () =>
{
    const [form] = React.UI.Form.useForm()
    let [hasMore, SethasMore] = useState(true);
    let [page, SetPage] = useState(1);
    let [list, SetList] = useState([]);
    let [visible, SetVisible] = useState(false)
    let [guest, SetGuest] = useState({
        id: 0,
        busid: React.business.id,
        nickname: React.business.nickname,
        mobile: React.business.mobile,
        gender: React.business.gender,
        gender_text: React.business.gender_text
    });

    //下拉刷新
    const onRefresh = async () =>
    {
        SetPage(1)
        SetList([])
        SethasMore(true)
        request()
    }

    //上拉加载
    const loadMore = async () => request()

    //获取数据
    const request = async () =>
    {
        var params = {
            busid: React.business.id,
            page,
        }

        //发送请求
        var result = await React.request.post('/guest/index', params)

        if(result.code == 0)
        {
            React.toast(result.msg, null, 'fail')
            SethasMore(false) //没有更多数据
            return false
        }

        SetPage((page) => {return page + 1})
        SethasMore(true) //后面还有数据
        // SetList(list.concat(result.data))

        SetList( (list) => {
            return list.concat(result.data)
        })
    }

    //按钮
    const RightAction = (row) =>
    {
        return [
            {
                key: 'edit',
                color: 'primary',
                text: '编辑',
                onClick: () => 
                {
                    SetVisible(true)
                    SetGuest(row)   

                    //修改数据 对表单中的input元素的值进行数据的修改
                    form.setFieldsValue(row)
                }
            },
            {
                key: 'delete',
                color: 'danger',
                text: '删除',
                onClick: async () => 
                {
                    //弹出提示框
                    var result = await React.UI.Dialog.confirm({
                        content: '是否确认删除住客信息'
                    })

                    //点击了确认
                    if(result)
                    {
                        var params = {
                            id: row.id,
                            busid: React.business.id
                        }

                        var result = await React.request.post('/guest/del', params)

                        if(result.code == 0)
                        {
                            React.toast(result.msg, null, 'fail');
                            return false
                        }

                        await onRefresh(); //刷新列表
                    }
                }
            },
            
        ]
    }

    //表单提交
    const onFinish = async (values) => 
    {
        SetVisible(false)

        values.id = guest.id
        values.busid = guest.busid

        var result = await React.request.post(guest.id == 0 ? '/guest/add' : '/guest/edit', values)

        if(result.code == 0)
        {
            React.toast(result.msg, null, 'fail')
            return false
        }

        onRefresh()  //刷新列表
        React.toast(result.msg, null, 'success');
    }

    return (
        <>
            {/* 下拉刷新 '\u00A0' 是非断空格的 Unicode */}
            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <React.UI.List>
                    {list.map((item, key) => (
                        <React.UI.SwipeAction key={key} rightActions={RightAction(item)}>
                            <React.UI.List.Item description={`${item.mobile}\u00A0\u00A0\u00A0\u00A0\u00A0 ${item.gender_text}`}>{item.nickname}</React.UI.List.Item>
                        </React.UI.SwipeAction>
                    ))}
                </React.UI.List>
            </React.UI.PullToRefresh>

            {/* 上拉加载无限滚动 */}
            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />

            {/* 底部按钮 */}
            <div style={{width:'100%', position:'fixed', left:'0px', bottom:'0px'}}>
                <React.UI.Button onClick={() => SetVisible(true)} style={{borderRadius:'0px'}} block color='primary' size='large'>添加住客信息</React.UI.Button>
            </div>

            {/* 弹出层 */}
            <React.UI.CenterPopup 
                visible={visible} 
                closeOnMaskClick={true} 
                onMaskClick={() => {SetVisible(false)}}   // ,form.resetFields()
                bodyStyle={{ marginLeft: '-40px', minWidth: '54vh'}}
                onClose={() => form.resetFields()}>
                <React.UI.Form
                    form={form}
                    name="guest"
                    layout='horizontal'
                    mode='card'
                    // initialValues={guest}
                    onFinish={onFinish}
                    footer={<React.UI.Button block type='submit' color='primary' size='large'>确定</React.UI.Button>}
                >
                    <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                        <React.UI.Input placeholder="请输入昵称" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true}, {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}]}>
                        <React.UI.Input placeholder="请输入手机号" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                        <React.UI.Radio.Group>
                            <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='0'>女</React.UI.Radio>
                            {/* <React.UI.Radio value='2'>女</React.UI.Radio> */}
                            </React.UI.Space>
                        </React.UI.Radio.Group>
                    </React.UI.Form.Item>

                </React.UI.Form>
            </React.UI.CenterPopup>
        </>
    )
}

export default Component